<template>
	<rui-pages :hHeight="180">

		<rui-card title="反馈内容" :top="-150">
			<view class="textarea">
				<textarea placeholder-style="color:#ddd" @input="changeInput" :maxlength="max" v-model="content"
					placeholder="请描述您的问题,我们将尽快为您解决(必填)" />
				<view style="text-align: right;">
					{{mini}}/{{max}}
				</view>
			</view>

		</rui-card>

		<view class="btn">
			<rui-button :disabled="btnStatus" title="提交反馈" @click="submit"></rui-button>
		</view>

	</rui-pages>

</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad,
		onShow,
	} from "@dcloudio/uni-app"
	// import {
	// 	saveFeedback
	// } from "@/common/api.js"



	let mini = ref(0),
		max = ref(100),
		content = ref(),
		btnStatus = ref(true);

	const submit = () => {
		// saveFeedback({
		// 	content: content.value
		// }).then(res => {
		// 	uni.$rui.toast('反馈成功', () => {
		// 		uni.navigateBack({
		// 			delta: 1
		// 		});
		// 	});
		// })
	}

	const changeInput = e => {
		mini.value = e.detail.cursor
		btnStatus.value = e.detail.cursor < 5 ? true : false
	}
</script>

<style lang="scss" scoped>
	.title {
		margin-bottom: 20rpx;
	}

	.btn {
		margin: 20rpx;
		padding-top: 30rpx;

		.button {
			border: none;
			color: #fff;
			font-size: 24rpx;
			box-shadow: 0rpx 5rpx 15rpx rgba(0, 0, 0, .2);
			background-image: linear-gradient(to right, #907fd8, #3165cc);
			text-align: center;
		}

		.disabled {
			background: #ddd;
		}
	}
</style>